<template>
  <BasicDrawer
    v-bind="$attrs"
    title="开票终端详情"
    cancelText="关闭"
    :showOkBtn="false"
    @register="terminalRegister"
    @close="drawerReset"
    width="1000"
    showFooter
    isAbsolute
    getContainer=".page-wrapper"
  >
    <div class="drawer-detail">
      <div class="detail-message">
        <div class="message-company">{{ drawerInfo.record.orgName || '--' }}</div>
        <div class="message-tax">{{ drawerInfo.record.taxesNumber || '--' }}</div>
      </div>
      <div class="detail-btn">
        <a-button type="primary" style="min-width: 80px" :loading="drawerInfo.dataLoading" @click="getListData"
          >刷新</a-button
        >
      </div>
      <div class="detail-table">
        <a-table
          :loading="drawerInfo.dataLoading"
          :columns="packageColumns"
          :dataSource="drawerInfo.dataList || []"
          :pagination="false"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex === 'index'">
              {{ index + 1 }}
            </template>
            <template v-else-if="column.dataIndex === 'taxesAccount'">
              <div class="tax-account">
                <span>{{ record.taxesAccount }}</span>
                <div v-if="record.defaultFlag === 1" class="account-default">默认</div>
              </div>
            </template>
            <template v-else-if="column.dataIndex === 'taxesPwd'">
              <div class="tax-account">
                <span v-if="!record.eyeShow">********</span>
                <span v-else>{{ record.taxesPwd }}</span>
                <div class="account-eye" @click="record.eyeShow = !record.eyeShow">
                  <eye-outlined v-if="!record.eyeShow" />
                  <eye-invisible-outlined v-else />
                </div>
              </div>
            </template>
            <template v-else-if="column.dataIndex === 'rpaType'">
              <span v-if="record.rpaType == 1">云端基础</span>
              <span v-else-if="record.rpaType == 2">云端VIP</span>
              <span v-else-if="record.rpaType == 3">本地基础</span>
              <span v-else>--</span>
            </template>
            <template v-else-if="column.dataIndex === 'rapNo'">
              {{ record.rapNo || '--' }}
            </template>
            <template v-else-if="column.dataIndex === 'rpaOnlineStatus'">
              <span v-if="record.rpaOnlineStatus">{{ record.rpaOnlineStatus }}</span>
              <span v-else>--</span>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref, createVNode } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { message, Modal } from 'ant-design-vue'
import { EyeOutlined, EyeInvisibleOutlined, ExclamationCircleFilled } from '@ant-design/icons-vue'
import { cloneDeep } from 'lodash-es'
import api from '@/api'

const { enterpriseTaxesList } = api

const emit = defineEmits(['register'])
const drawerInfo = reactive<any>({
  record: {},
  dataLoading: false,
  dataList: []
})

const packageColumns = [
  {
    title: '序号',
    align: 'right',
    width: 60,
    dataIndex: 'index'
  },
  {
    title: '电子税局账号',
    dataIndex: 'taxesAccount'
  },
  {
    title: '电子税务局密码',
    dataIndex: 'taxesPwd'
  },
  {
    title: '开票终端类型',
    dataIndex: 'rpaType'
  },
  {
    title: '终端号',
    dataIndex: 'terminalNo'
  },
  {
    title: '在线状态',
    dataIndex: 'rpaOnlineStatus'
  }
]

const getListData = async () => {
  try {
    drawerInfo.dataLoading = true
    let res = await enterpriseTaxesList({ orgTenantId: drawerInfo.record.tenantId })
    let result = res.result || []
    result.forEach((item: any) => {
      item.eyeShow = false
    })
    drawerInfo.dataList = result
    drawerInfo.dataLoading = false
  } catch (error) {
    drawerInfo.dataLoading = false
  }
}
const [terminalRegister, { closeDrawer, changeLoading, changeOkLoading }] = useDrawerInner(async (data) => {
  drawerInfo.record = cloneDeep(data.record) || {}
  getListData()
})

const drawerReset = () => {
  drawerInfo.dataLoading = false
  drawerInfo.dataList = []
}
</script>

<style lang="less" scoped>
.drawer-detail {
  color: #172237;
  .detail-message {
    min-height: 88px;
    padding: 20px 24px;
    border-radius: 4px;
    border: 1px solid #e0e1e6;
    .message-company {
      font-size: 16px;
      line-height: 22px;
      font-weight: 500;
    }
    .message-tax {
      color: #192235;
      line-height: 22px;
    }
  }
  .detail-btn {
    margin: 16px 0 8px 12px;
  }
  .tax-account {
    line-height: 22px;
    display: flex;
    align-items: center;
    .account-default {
      width: 42px;
      height: 22px;
      margin-left: 8px;
      background: #e9f4fe;
      border-radius: 2px;
      text-align: center;
      font-size: 12px;
      color: #67a1f8;
      border: 1px solid #add3fb;
    }
    .account-eye {
      color: #555d6f;
      margin-left: 8px;
      font-size: 14px;
      cursor: pointer;
    }
  }
}
</style>
